<template>
	<view class="content">
		<van-nav-bar
		  title="产品详情"
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
		
		<view class="product-pic-eara">
		
			<van-image
			class="product-pic"
			  width="10rem"
			  height="10rem"
			  fit="cover"
			  position="center"
			  :src="this.link"
			/>
			
		</view>
		<van-cell-group inset>
		  <!-- <van-cell title="ID" :value="this.ID"/> -->
		  <van-cell center title="产品名称" value-class="balck_flex_3" :value="this.product_title"/>
		  <van-cell title="产品料号" value-class="balck_flex_3" :value="this.product_code"/>
		  <van-cell title="适用车型" value-class="balck_flex_3" :value="this.alias"/>
		  <van-cell title="创建时间" value-class="balck_flex_3" :value="formatTimestamp(this.createtime)"/>
		  <!-- <van-cell title="批次" :value="this.bathtime" label="产品批次" /> -->
		  <!-- <van-cell title="产品状态" value-class="balck_flex_3" :value="getProductStatusText(this.product_status)"/> -->
		  <van-cell title="产品状态" value-class="balck_flex_3" :value="getStatusText(this.status)"/>
		  <van-cell title="生产厂家" value-class="balck_flex_3" :value="this.factory"/>
		  <!-- <van-cell title="工厂地址" value-class="balck_flex_3" :value="this.factoryAddress"/> -->
		  <!-- <van-cell title="联系方式" value-class="balck_flex_3" :value="this.factoryPhone"/> -->
		</van-cell-group>
		
		<!-- --> <view class="vant-button-area">
			<van-button class="select-btn" round block type="primary" v-if="this.status == 0"  @click="codeDetails()" >填写售后卡</van-button>
		</view>
		
	
	
	
	
	
	<!-- <van-divider
	  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
	>
	  文本
	</van-divider> -->

	</view>
</template>

<script>
	import {showToast, showSuccessToast, showFailToast } from 'vant';
	export default {
		data() {
			return {
				factory: '',
				factoryAddress: '',
				productCode: '',
				link: '',
				productStatus:'',
				ID:'',
				alias:'',
				product_title:'',
				product_code:'',
				createtime:'',
				bathtime:'',
				product_status:'',
				status:'',
				factoryPhone:'',
			}
		},
		
		onLoad() {
			// 获取当前请求连接上的参数
			let url = window.location.href;
			// 截取url中的参数
			let index = url.indexOf("productCode"); //获取=的位置
			console.log('index',index);
			let str = url.substr(index + 12); //获取?之后的参数
			this.productCode = str;
			if (str) {
					// window.location.reload();
				this.getProductList(str);
			} else {
				showToast("请返回并输入序列号");
			}
		},
		
		
		// 设置sleep时间，等待页面加载完成  自动跳转
		// setTimeout(() => {
		// 	this.getProductList(this.code);
		// }, 500);
		
		// watch: {
		// 	$router(to, from) {
		// 		this.$router.go(0)
		// 	}
		// },
		
		methods: {
			
			// :to="{path: './customerFormInfo/index', query: {productCode: this.productCode}}"
			// 页面跳转并携带参数
			codeDetails(){
				if(this.code == ''){
					showToast('请先扫码或输入序列号获取产品信息！');
					return;
				} else {
					uni.navigateTo({
						url: '/pages/productDetail/customerFormInfo/index?productCode=' + this.productCode
					});
				}
			},
			getProductList(str){
				var getProductListUrl = "https://service.wulings.com/api/code/getCodeList";
				let productList = uni.request({
					// url:"/api/" + getProductListUrl,
					url: getProductListUrl,
					method: 'GET', // 请求方法，可选值包括 'GET'、'POST' 等
					data: {code: str}, // 请求参数
					success: res => {
						this.link = res.data.img?"https://service.wulings.com/"+ res.data.img:"/static/logo.jpg";
						this.product_code = res.data.code;
						this.product_title = res.data.product_title;
						this.createtime = res.data.createtime;
						this.bathtime = res.data.bathtime;
						this.product_status = res.data.product_status;
						this.status = res.data.status;
						this.alias = res.data.alias;
						this.factory = res.data.factory;
						this.factoryAddress = res.data.factoryAddress;
						this.factoryPhone = res.data.factoryPhone;
						// 请求成功时的回调函数
						showSuccessToast('查询成功！');
					},
					fail: err => {
						// 请求失败时的回调函数
						showFailToast('查询失败');
					}
				}); 
			},
			
			formatTimestamp(timestamp) {
			      // 创建一个 Date 对象
			      var date = new Date(timestamp * 1000);
			      
			      // 按照您希望的时间格式进行格式化
			      var formattedDate = date.toLocaleString(); // 例如: 2022/01/31
			
			      return formattedDate;
			},
			getStatusText(status) {
			      switch (status) {
			        case 0:
			          return '未使用';
			        case 1:
			          return '未激活';
			        case 2:
			          return '已激活';
			        case -1:
			          return '已删除';
			        case 4:
			          return '已作废';
					case 5:
						return '已出库';
					case 6:
						return '已入库';
			        default:
			          return '未知状态';
			      }
			},
			getProductStatusText(status) {
			      switch (status) {
			        case 1:
			          return '良好';
			        case 2:
			          return '不良';
			        default:
			          return '未知状态';
			      }
			},
			onClickLeft(){
				// 回到上一级
				this.$router.back();
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* background-color: #f7f8fa; */
		height: 100vh;
	}
	
	
	.product-pic-eara {
		margin-top: 20px;
		margin-bottom: 20px;
		text-align: center; /* 水平居中 */
	}
	
	.product-pic {
		/* 居中 */
		text-align: center; /* 水平居中 */
		justify-content: center; /* 水平居中 */
		align-items: center; /* 垂直居中 */
	}
	
	.select-btn {
		width: 400rpx;
		/* 居中 */
		text-align: center; /* 水平居中 */
		justify-content: center; /* 水平居中 */
		  align-items: center; /* 垂直居中 */
	}
	
	
	/deep/ .van-card__thumb {
	  border-radius: 10px; /* 设置圆角 */
	  /* 其他你想要自定义的样式 */
	  height: 150px;
	  width: 150px;
	}
	
	/deep/ .van-card__title {
	  /* 其他你想要自定义的样式 */
	  font-size: 16px;
	  width: 100%;
	  height: 60px;
	  line-height: 2;
	  /* 居中 */
	  text-align: center; /* 水平居中 */
	  justify-content: center; /* 水平居中 */
	    align-items: center; /* 垂直居中 */
	}
	
	/deep/ .van-card__desc {
	  /* 其他你想要自定义的样式 */
	  font-size: 14px;
	  width: 100%;
	  height: 60px;
	  margin-bottom: 50px;
	}
	
	
</style>